import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    RefreshControl,
    AppRegistry,
    Dimensions,
    Platform,
    Image
} from 'react-native';
import { Container, Content, Left, Thumbnail, Text, Body, Icon, Badge, List, ListItem, Right, Spinner } from 'native-base';
import Collapsible from 'react-native-collapsible';
import { connect } from 'react-redux';
import { NavigationActions } from 'react-navigation';
import course from '../../net/course.js';
import CourseResource from '../../db/coursedb/course_resource_table.js';
const { width, height } = Dimensions.get('window');
//var video = Platform.OS === 'ios' ? 'iOSVideo' : 'Video';

class course_detail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            resourse: null,
            DetailInfo: null,
        }

    }
    async componentWillMount() {
        const { course_info, chapter_info } = this.props;
        let detailtemp = [
            {
                name: '课程名',
                value: course_info ? course_info.coursetitle : '无',
            },
            {
                name: '章节名',
                value: chapter_info ? chapter_info.chapterTitle : '无',
            },
            {
                name: '学习单元',
                value: chapter_info ? chapter_info.subChapterTitle : '无',
            },
            {
                name: '主讲老师',
                value: course_info ? course_info.chiefTeacherName : '无',
            }
        ];
        this.setState({ DetailInfo: detailtemp });
        //资源缓存
        let resourceIn = new CourseResource();
        try {
            await resourceIn.createCourseResourceTable();
            let info = await resourceIn.queryCourseResource(chapter_info.subChapterId);
            if (info != null && info.length > 0) {
                console.log('Resource1111111111');
                if (info.item(0).resourcevalue === 'noresource') {
                    this.setState({ resourse: 'noresource' });
                } else {
                    let outArray = JSON.parse(info.item(0).resourcevalue);
                    this.setState({ resourse: outArray });
                }
                await resourceIn.closeCourseResource();
            } else {
                console.log('Resource2222222222');
                let cs = new course();
                let outArray = await cs.get_resource(chapter_info.subChapterId);
                if (outArray != undefined) {
                    this.setState({ resourse: outArray });
                    resourceIn.insertCourseResource(chapter_info.subChapterId, JSON.stringify(outArray));
                } else {
                    this.setState({ resourse: 'noresource' });
                    resourceIn.insertCourseResource(chapter_info.subChapterId, 'noresource');
                }
                await resourceIn.closeCourseResource();
            }
        } catch (e) {
            console.log("error", e);
        }
    }

    onpress(filetype, url) {
        const { setResourseURL } = this.props;
        if (filetype === 1) {
            setResourseURL({
                type: 'GetResourceUrl',
                payload: {
                    resourseURL: url,
                }
            });
            this.props.navigation.dispatch('Handouts');
            this.props.navigation.navigate('Handouts');
        } else if (filetype === 2) {
            setResourseURL({
                type: 'GetResourceUrl',
                payload: {
                    resourseURL: url,
                }
            });
            //this.props.navigation.dispatch('Video');
            this.props.navigation.navigate('Video');
        }
    }

    renderContent(l) {
        if (l === 'noresource') {
            return (
                 <ListItem button style={StyleSheet.flatten(styles.mainList)}>
                        <Body>
                            <Text style={StyleSheet.flatten(styles.content)}>暂无资源</Text>
                        </Body>
                    </ListItem>
            );
        }
        return l.map((v, i) => {
            return (
                <View key={i}>
                    <ListItem button style={StyleSheet.flatten(styles.mainList)}
                        onPress={() => {
                            this.setState(this.state.selectedItem !=i ? { selectedItem: i } : { selectedItem: -1 });
                        }}>
                        <Body>
                            <Text style={StyleSheet.flatten(styles.content)}>{v.coursewareTitle}</Text>
                        </Body>
                    </ListItem>

                    <Collapsible collapsed={this.state.selectedItem === i ? false : true}>
                        <List>
                            {v.activityFolder[0].fileFolder.map((w, j) => {
                                return (
                                    <ListItem key={j} style={StyleSheet.flatten(styles.subList)}
                                        onPress={() => { this.onpress(w.fileType, w.url); }}>
                                        <Icon name={w.fileType === 1 ? 'ios-paper-outline' : 'ios-film'} style={{ opacity: 0.6, paddingRight: 5, color: '#62B1F6', fontSize: 23 }} />
                                        <Body>
                                            <Text style={StyleSheet.flatten(styles.subcontent)}>{w.fileName}</Text>
                                        </Body>
                                        <Icon name="arrow-forward" style={{ opacity: 0.6, color: '#62B1F6', fontSize: 23 }} />
                                        {/* <Image style={StyleSheet.flatten(styles.backIcon)} source={require('../../images/back.png')} /> */}
                                    </ListItem>
                                );
                            })}
                        </List>
                    </Collapsible>
                </View>
            );
        })
    }
    renderDetail(l) {
        return l.map((v, i) => {
            return (
                <View key={i}>
                    <ListItem style={StyleSheet.flatten(styles.mainList)}>
                        <Body>
                            <Text style={StyleSheet.flatten(styles.content)}>{v.name}</Text>
                        </Body>
                        <Text style={{ paddingLeft: '8%', width: '60%', fontSize: 15, color: '#353535', }}>{v.value}</Text>
                    </ListItem>
                </View>
            )
        });
    }
    render() {
        if (!this.state.resourse) {
            return this.renderLoadingView();
        }
        return (
            <Content>
                <ListItem itemDivider><Text style={StyleSheet.flatten(styles.title)}>课程详细信息</Text></ListItem>
                {this.renderDetail(this.state.DetailInfo)}

                <ListItem itemDivider><Text style={StyleSheet.flatten(styles.title)}>课程资源</Text></ListItem>
                {this.renderContent(this.state.resourse)}
            </Content>
        );
    }
    renderLoadingView() {
        return (
            <Container>
                <Content>
                    <Spinner color='green' />
                </Content>
            </Container>
        );
    }
}

const styles = StyleSheet.create({
    mainList: {
        marginRight: 0,
        marginLeft: 0,
        marginTop: 1,
        paddingBottom: 10,
        paddingLeft: 15,
        backgroundColor: 'white',
        borderBottomWidth: 0.3,
        borderBottomColor: "#cac0c0",

    },
    subList: {
        marginRight: 0,
        marginLeft: 0,
        marginTop: 1,
        paddingBottom: 10,
        paddingLeft: 30,
        paddingRight: 15,
        backgroundColor: 'white',
        borderBottomWidth: 0.3,
        borderBottomColor: "#cac0c0",
    },
    title: {
        fontSize: 17,
        color: '#353535',
    },
    content: {
        fontSize: 15,
        color: '#353535',
    },
    subcontent: {
        fontSize: 13,
        color: '#62B1F6',
    },
    backIcon: {
        width: 20,
        height: 20,
        // marginLeft:'63%',
        marginRight: '5%',
        opacity: 0.6,

    },


});
function mapStateToProps(state) {
    return {
        course_info: state.course_info.course_info,
        chapter_info: state.course.chapter_info
    }
}

function mapDispatchToProps(dispatch) {
    return {
        setResourseURL: (state) => dispatch(state)
    }
}

const PageCourseDetail = connect(
    mapStateToProps,
    mapDispatchToProps
)(course_detail)
export default PageCourseDetail;